<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/connectAccount.css" />
    <style>
        .mesinp2 .redactive {
            color: #E31C1C;
        }
    </style>
</head>

<body>
    <div class="connectAccount" style="color:#000;">
        <div class="row">
            <div class="col-xs-6 shoko"><a class="message active">账户回填</a></div>
            <div class="col-xs-6 shoko"><a class="message">回填记录</a></div>
        </div>
        <div class="mes mesinp1">
            <div style="color:#000;">当前用户信息</div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 account">
                    <div class="box">
                        <div class="user"><span>用户名：</span><span style="color:#000;">1C1C</span> </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 account">
                    <div class="box">
                        <div class="user"><span>当前等级：</span><span style="color:#000;">VIP1</span> </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 account">
                    <div class="box">
                        <div class="user"><span>需回填金额：</span><span>$700.00</span> </div>
                    </div>
                </div>
            </div>
            <form class="form-horizontal" style="margin-top: 30px;">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">选择支付方式</label>
                    <div class="col-sm-8">
                        <select id="inputEmail3" class="form-control col-sm-8">
                            <option>请选择支付方式</option>
                        </select>
                        <div style="line-height: 30px; color: #E31C1C;">现金积分余额：<span>$500</span>，通过购买的现金积分：<span>$500</span></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">安全密码</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control" id="inputEmail3" placeholder="请输入安全密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="inputPassword3" placeholder="请输入验证码">
                    </div>
                    <div class="col-sm-2 col-xs-5  img">
                        <img src="img/image/bgtop.png" alt="">
                    </div>
                </div>
                <div class="btnsure"><button id="sureTo">确认</button></div>

            </form>
        </div>
        <div class="mes mesinp2 hidden">
            <div class="table-responsive">
                <table class="table table-hover" style="text-align:center;color:#000">
                    <tr class="active">
                        <td>回填次数</td>
                        <td>回填等级</td>
                        <td>回填金额</td>
                        <td>回填时间</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td class="redactive">VIP2</td>
                        <td class="redactive">$700.00</td>
                        <td>2018-12-29 15:35:05</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td class="redactive">VIP2</td>
                        <td class="redactive">$700.00</td>
                        <td>2018-12-29 15:35:05</td>
                    </tr>
                    <tr>
                        <td colspan="5" style="color:#666;">暂无更多数据</td>
                    </tr>
                </table>
            </div>
        </div>


    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/hplus.js"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script>
        $(".message").each(function (index) {
            $(".message").eq(index).click(function () {
                $(".message").removeClass("active");
                $(this).addClass("active");
                if (index == 0) {
                    $('.mesinp1').removeClass("hidden");
                    $(".mesinp2").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 1) {
                    $('.mesinp2').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 2) {
                    $('.mesinp3').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp2").addClass("hidden");
                }
            });
        })
        $("#sureTo").click(function () {
            layer.open({
                title: '温馨提示'
                , content: '确定解除该用户名的账户关联？'
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    //确定的回调
                }
            });
        });
        $("#sureTo2").click(function () {
            layer.open({
                title: '温馨提示'
                , content: '新的账户关联已添加成功'
            });
        });
    </script>
</body>

</html>